<style lang="less" scoped>
.con-middle {
  width: 798px;
  height: 355px;
  .middle-left {
    width: 50%;
    height: 100%;
    background: url("../../assets/images/content/middlebj.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
    padding: 22px 34px 34px;
    .left-desc {
      height: 90%;
      .left-ech {
        width: 48%;
        height: 100%;
      }
      ul {
        width: 50%;
        // height: 100%;
        flex-flow: column;
        justify-content: space-around;
        li {
          // height: 30%;
          margin-bottom: 20px;
          p:nth-child(1) {
            font-size: 24px;
            font-family: Microsoft YaHei;
            color: #0eceff;
          }
          p:nth-child(2) {
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #ffffff;
            span {
              font-size: 16px;
              color: #edae5d;
            }
          }
        }
      }
    }
  }
  .middle-right {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/content/middlebj.png") no-repeat;
    background-size: 100% 100%;
    padding: 22px 34px 24px;
    .middle-desc {
      p {
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #ffffff;
        span:nth-child(1) {
          font-size: 30px;
          font-family: Microsoft YaHei;
          color: #0dcdff;
          margin-right: 6px;
        }
        span:nth-child(2) {
          font-size: 16px;
          font-family: Microsoft YaHei;
          color: #edad5d;
        }
      }
    }
    img {
      width: 100%;
      display: block;
      margin: 40px auto;
    }
  }
}
</style>
<template>
  <div class="con-middle flex">
    <!-- <div class="middle-left">
      <checked-title :title="oldTitle"></checked-title>
      <div class="flex flex-between align-items-center left-desc">
        <div class="left-ech">
          <div id="echarts3"
               ref="echarts3"
               style="width:100%;height:100%;"></div>
        </div>
        <ul>
          <li>
            <p>{{area}}万</p>
            <p>涉及建筑面积<span> ( 平方米 )</span></p>
          </li>
          <li>
            <p>{{floor}}</p>
            <p>涉及楼栋数<span> ( 栋 )</span></p>
          </li>
          <li>
            <p>{{household}}</p>
            <p>涉及户数<span> ( 户 )</span></p>
          </li>
        </ul>
      </div>
    </div> -->
    <div class="middle-right">
      <checked-title :title="carTitle"></checked-title>
      <img src="../../assets/images/content/carmanage.gif"
           alt="">
      <div class="middle-desc flex flex-between">
        <p>终端个数：<span>18</span><span>个</span></p>
        <p>今日里程：<span>162</span><span>km</span></p>
      </div>
    </div>
  </div>
</template>

<script>
// import https from '@request/https'
import axios from "axios";
export default {
  data() {
    return {
      oldTitle: "老旧小区改造进展",
      carTitle: "GPS车辆管理",
      totalNum: 617,
      datas: {},
      statisticsNum: [
        {
          name: '待进场',
          value: ''
        },
        {
          name: '施工建设',
          value: ''
        },
        {
          name: '验收',
          value: ''
        }
      ],
      area:'',
      floor: '',
      household: '',
    };
  },
  
  watch: {
    datas: {
      deep: true,
      handler: function() {
        // this.echarts1();
      }
    }
  },
  created () {
    this.getOld()
  },
  methods: {
    echarts4() {
      var myChart3 = echarts.init(this.$refs.echarts3);
      // var data = [
      //   {
      //     name: "待进场",
      //     value: 75
      //   },
      //   {
      //     name: "施工建设",
      //     value: 61
      //   },
      //   {
      //     name: "验收",
      //     value: 40
      //   }
      // ];
      var data = this.statisticsNum
      var color = ["#00B0FC", "#FDEF06", "#21D3FF"];
      var color1 = [
        "rgba(34, 212, 255, 0.2)",
        "rgba(34, 212, 255, 0.5)",
        "rgba(34, 212, 255, 0.8)"
      ];
      var sumValue = 1000;
      var optionData = getData(data);
      function getData(data) {
        var res = {
          series: [
            {
              name: "大环",
              type: "gauge",
              radius: "100%",
              center: ["50%", "45%"],
              startAngle: 180,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              detail: {
                show: false
              },
              splitLine: {
                show: false
              }
            },
            {
              name: "小环",
              type: "gauge",
              // splitNumber: 15,
              radius: "100%",
              center: ["50%", "45%"],
              startAngle: 180,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              detail: {
                show: false
              }
            }
          ],
          yAxis: []
        };
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: "学历",
            type: "pie",
            clockWise: false,
            z: 2,
            hoverAnimation: false,
            radius: [82 - i * 15 + "%", 90 - i * 15 + "%"],
            center: ["50%", "35%"],
            roundCap: true,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              color: color[i]
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name
              },
              {
                value: sumValue - data[i].value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0
                },
                tooltip: {
                  show: false
                },
                label: {
                  show: false
                },
                hoverAnimation: false
              }
            ]
          });
          res.series.push({
            name: "背景线",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: true,
            hoverAnimation: false,
            radius: [87 - i * 15 + "%", 89 - i * 15 + "%"],
            center: ["50%", "35%"],
            roundCap: true,
            label: {
              show: false
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: color1[i],
                  borderWidth: 0
                },
                tooltip: {
                  show: false
                },
                hoverAnimation: false
              }
            ]
          });
        }
        return res;
      }
      var option3 = {
        title: {
          show: true,
          text: "小区\n" + this.totalNum + "个",
          x: "center",
          y: "28%",
          textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item",
          show: true,
          // formatter: "{b} : <br/>{d}%",
          formatter: "{b}:{c}  {d}%",
          backgroundColor: "rgba(0,0,0,0.1)", // 背景
          padding: [8, 10], //内边距
          extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);" //添加阴影
        },
        grid: {
          top: "4%",
          bottom: "4%",
          left: "4%",
          containLabel: false
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "left",
          y: "bottom",
          itemGap: 15,
          itemWidth: 12,
          itemHeight: 12,
          data: ["待进场", "施工建设", "验收"],
          // textStyle: {
          //   color: "#fff",
          //   fontSize: 14
          // },
          formatter: function(name) {
            let target;
            for (var i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            if (name === "待进场") {
              return ["{d|" + name + "}" + "{a|" + target + "}"].join("\n");
            } else if (name === "施工建设") {
              return ["{d|" + name + "}" + "{b|" + target + "}"].join("\n");
            } else {
              return ["{d|" + name + "}" + "{c|" + target + "}"].join("\n");
            }
          },
          textStyle: {
            rich: {
              a: {
                color: "#21D3FF",
                fontSize: 16,
                lineHeight: 12,
                fontWeight: 600,
                padding: [0, 5]
              },
              b: {
                color: "#FDEF06",
                fontSize: 16,
                lineHeight: 12,
                fontWeight: 600,
                padding: [0, 5]
              },
              c: {
                color: "#00B0FC",
                fontSize: 16,
                lineHeight: 12,
                fontWeight: 600,
                padding: [0, 5]
              },
              d: {
                color: "#fff"
              }
            }
          }
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            z: 3,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: optionData.yAxis
          }
        ],
        xAxis: [
          {
            show: false
          }
        ],
        series: optionData.series
      };
      myChart3.setOption(option3);
    },

    echarts3() {
      var myChart3 = echarts.init(this.$refs.echarts3);
      var dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: "rgba(0, 0, 0, 0)" //边框阴影
        }
      };
      var placeHolderStyle = {
        normal: {
          color: "transparent",
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          color: "#eee"
        }
      };
      var placeHolderStyle1 = {
        normal: {
          color: "#ddd",
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          color: "#eee"
        }
      };
      var color = ["#00B0FC", "#FDEF06", "#21D3FF"];
      var option3 = {
        title: {
          show: false,
          text: "小区" + this.totalNum + "个",
          x: "center",
          y: "30%",
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: "{b} : <br/>{d}%",
          backgroundColor: "rgba(0,0,0,0.1)", // 背景
          padding: [8, 10], //内边距
          extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);" //添加阴影
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "left",
          y: "bottom",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          data: ["待进场", "施工建设", "验收"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: false,
            radius: [59, 60],
            center: ["50%", "30%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            label: {
              borderRadius: 20
            },
            data: [
              {
                value: 50,
                name: "待进场",
                itemStyle: {
                  normal: {
                    color: color[0]
                  }
                },
                label: {
                  borderRadius: 20
                }
              },
              {
                value: 50,
                name: "",
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle1
              }
            ]
          },
          {
            name: "Line 1",
            type: "pie",
            clockWise: false,
            radius: [50, 60],
            center: ["50%", "30%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            label: {
              borderRadius: 40
            },
            data: [
              {
                value: 44,
                name: "待进场",
                itemStyle: {
                  normal: {
                    color: color[0]
                  }
                },
                borderRadius: 40
              },
              {
                value: 100,
                name: "",
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: "Line 2",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            center: ["50%", "30%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: 56.7,
                name: "施工建设",
                itemStyle: {
                  normal: {
                    color: color[1]
                  }
                }
              },
              {
                value: 43.3,
                name: "",
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle1
              }
            ]
          },
          {
            name: "Line 2",
            type: "pie",
            clockWise: false,
            radius: [16, 10],
            center: ["50%", "30%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: 56.7,
                name: "施工建设",
                itemStyle: {
                  normal: {
                    color: color[1]
                  }
                }
              },
              {
                value: 43.3,
                name: "",
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: "Line 3",
            type: "pie",
            clockWise: false,
            radius: [16, 10],
            center: ["50%", "30%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: 30,
                name: "验收",
                itemStyle: {
                  normal: {
                    color: color[2]
                  }
                }
              },
              {
                value: 70,
                name: "",
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle1
              }
            ]
          },
          {
            name: "Line 3",
            type: "pie",
            clockWise: false,
            radius: [16, 10],
            center: ["50%", "30%"],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: 30,
                name: "验收",
                itemStyle: {
                  normal: {
                    color: color[2]
                  }
                }
              },
              {
                value: 70,
                name: "",
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      };
      myChart3.setOption(option3);
    },
    getOld () {
      var api="http://class.fancysx.com/api/oldNeighborhood/count.json"
      axios ({
        method: "post",
        url:api,
        headers: {'X-Requested-With': 'XMLHttpRequest'},
      }).then (res => {
        if(res.data.code == 0) {
          var datas = res.data.data
          this.statisticsNum[0].value = datas.checkNum
          this.statisticsNum[1].value = datas.marchNum
          this.statisticsNum[2].value = datas.overNum
          this.area = datas.buildArea
          this.floor = datas.towerSum
          this.household = datas.housingSumNum
          this.totalNum = datas.housingNum
          this.echarts4();
        } else {
          this.$notify.error({
            title: '错误',
            message: res.data.msg
          });
        }
      })
    }
  }
};
</script>